<template>
  <div>
    <div class="sidebarcom-nav">
      <div class="sidebarcom-nav-cnt">
        <div class="account">
          <div class="iconfont icon-zhanghao"></div>
          <p>账号</p>
          <div class="club">
            <div class="club_head">
              <img src="./images/my_cnt_pic.jpg" alt="" />
            </div>
            <p>你好！请登录|注册</p>
            <div class="club_foot">
              <div class="club_l">
                <i class="iconfont icon-dingdan"></i>
                <div>我的订单</div>
              </div>
              <div class="club_cut"></div>
              <div class="club_r">
                <i class="iconfont icon-qianbi"></i>
                <div>我的唯品会</div>
              </div>
            </div>
          </div>
        </div>
        <div class="buy_bag">
          <div class="iconfont icon-gouwudai"></div>
          <p>购</p>
          <p>物</p>
          <p>袋</p>
          <div class="buy_bag_num">0</div>
        </div>
        <div class="coupon">
          <a href="">
            <div class="iconfont icon-youhuiquan"></div>
            <div class="coupon_str">我的优惠卷</div>
          </a>
        </div>
        <div class="brand_collection">
          <a href="">
            <div class="iconfont icon-aixin"></div>
            <div class="brand_collection_str">品牌收藏</div>
          </a>
        </div>
        <div class="merchandise_collection">
          <a href="">
            <div class="iconfont icon-shoucang"></div>
            <div class="merchandise_collection_str">商品收藏</div>
          </a>
        </div>
        <div class="footprint">
          <a href="">
            <div class="iconfont icon-wodezuji"></div>
            <div class="footprint_str">我的足迹</div>
          </a>
        </div>
      </div>
      <div class="sidebarcom-nav-foot">
        <div class="member_feedback">
          <a href="">
            <div class="iconfont icon-fankui"></div>
            <div class="member_feedback_str">会员反馈</div>
          </a>
        </div>
        <div class="return_top">
          <a href="#">
            <div class="iconfont icon-dingbu"></div>
            <div class="return_top_str">返回顶部</div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SideNav",
};
</script>

<style lang="less" scoped>
.sidebarcom-nav {
  z-index: 100;
  position: fixed;
  right: 0;
  top: 0;
  width: 36px;
  height: 100%;
  background-color: #262626;

  .sidebarcom-nav-cnt {
    z-index: 100;
    margin-top: -250px;
    height: 400px;
    width: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    text-align: center;
    .account {
      &:hover {
        background-color: #df147f;

        .club {
          display: block;
        }
      }
      
      height: 41.6px;
      font-size: 14px;
      color: #fff;
      margin-bottom: 1px;
      position: relative;
      .club {
        position: absolute;
        top: 0;
        right: 36px;
        width: 275px;
        height: 270px;
        background-color: #fff;
        border: 1px solid #ccc;
        display: none;
        color: #333;
        font-size: 12px;

        .club_head {
          img {
            display: block;
            margin: 30px auto 20px;
            width: 66px;
            height: 66px;
            padding: 4px;
            border-radius: 66px;
            background-color: #fff;
            box-shadow: 0 3px 4px 0 rgb(0 0 0 / 11%);
          }
        }

        p {
          text-align: center;
        }
        .club_foot {
          width: 100%;
          height: 80px;
          margin: 14px 0;
          border-top: 1px solid #e5e5e5;
          border-bottom: 1px solid #e5e5e5;
          background-color: #f8f8f8;

          .club_cut {
            background-color: #ccc;
            width: 2px;
            height: 60px;
            margin: 10px 50px;
            float: left;
          }
          .club_l {
            padding: 20px 0px 0px 50px;
            float: left;
          }
          .club_r {
            padding: 20px 0px 0px 0px;
            float: left;
          }
        }
      }
    }
    .buy_bag {
      height: 149.8px;
      background-color: #df147f;
      color: #fff;
      font-size: 14px;
      .icon-gouwudai {
        font-size: 30px;
      }

      .buy_bag_num {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        color: #df147f;
        margin: 5px 0px 0px 8px;
      }
    }
    .coupon {
      &:hover {
        background-color: #df147f;
        .coupon_str {
          display: block;
        }
      }
      height: 36px;
      margin-top: 3px;
      position: relative;
      .coupon_str {
        position: absolute;
        right: 36px;
        top: 0;
        width: 117px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        border: 1px solid #ccc;
        font-size: 14px;
        display: none;
        text-align: center;
      }
      .icon-youhuiquan {
        font-size: 25px;
        color: #fff;
      }
    }
    .brand_collection {
      &:hover {
        background-color: #df147f;
        .brand_collection_str {
          display: block;
        }
      }
      height: 36px;
      position: relative;
      .brand_collection_str {
        position: absolute;
        right: 36px;
        top: 0;
        width: 117px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        border: 1px solid #ccc;
        font-size: 14px;
        display: none;
        text-align: center;
      }

      .icon-aixin {
        font-size: 25px;
        color: #fff;
      }
    }
    .merchandise_collection {
      &:hover {
        background-color: #df147f;
        .merchandise_collection_str {
          display: block;
        }
      }
      height: 36px;
      position: relative;
      .icon-shoucang {
        font-size: 25px;
        color: #fff;
      }
      .merchandise_collection_str {
        position: absolute;
        right: 36px;
        top: 0;
        width: 117px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        border: 1px solid #ccc;
        font-size: 14px;
        display: none;
        text-align: center;
      }
    }
    .footprint {
      &:hover {
        background-color: #df147f;
        .footprint_str {
          display: block;
        }
      }
      height: 36px;
      position: relative;
      .icon-wodezuji {
        font-size: 25px;
        color: #fff;
      }
      .footprint_str {
        position: absolute;
        right: 36px;
        top: 0;
        width: 117px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        border: 1px solid #ccc;
        font-size: 14px;
        display: none;
        text-align: center;
      }
    }
  }
  .sidebarcom-nav-foot {
    height: 72px;
    width: 100%;
    position: absolute;
    bottom: 5px;
    right: 0;
    text-align: center;
    .member_feedback {
      &:hover {
        background-color: #df147f;
        .member_feedback_str {
          display: block;
        }
      }
      width: 36px;
      height: 36px;
      position: relative;
      .member_feedback_str {
        position: absolute;
        right: 36px;
        top: 0;
        width: 117px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        border: 1px solid #ccc;
        font-size: 14px;
        display: none;
        text-align: center;
      }
      .icon-fankui {
        font-size: 25px;
        color: #fff;
      }
    }
    .return_top {
      &:hover {
        background-color: #df147f;
        .return_top_str {
          display: block;
        }
      }
      width: 36px;
      height: 36px;
      position: relative;
      .return_top_str {
        position: absolute;
        right: 36px;
        top: 0;
        width: 117px;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        border: 1px solid #ccc;
        font-size: 14px;
        display: none;
        text-align: center;
      }
      .icon-dingbu {
        font-size: 25px;
        color: #fff;
      }
    }
  }
}
</style>
